import React, { useState, useEffect } from 'react';
import Router from 'next/router';
import Head from 'next/head';
import { Row, Col, Button } from 'antd';
import { LikeOutlined, FileTextOutlined } from '@ant-design/icons';
import Header from '../components/header';
import Footer from '../components/footer';
import Bgc from '../components/bgc';
import cssIndex from '../static/style/pages/index.scss';
import API from '../util/apiUrl';

const Index = (props) => {
  console.log('props', props, 'cssIndex', cssIndex);
  useEffect(() => {
    showTop();

    if (props.list[0] && props.list[0].isRecommendRes) {
      setRecommendList(getRecommendList(props.list[0].isRecommendRes)) 
    }
    if(props.list[1]&&props.list[1].allRes){
      setAllList(getRecommendList(props.list[1].allRes)) 
    }

    document.addEventListener('scroll', scrollListener);
    return () => {
      document.removeEventListener('scroll', scrollListener);
    };
  }, []);
  // const [isDetails, setIsDetails] = useState(false);
  const [colorList, setColorList] = useState([
    '#FF5E3A',
    '#FF2A68',
    '#EF4DB6',
    '#C643FC',
    '#1AD6FD',
    '#1D62F0',
    '#FFCC00',
    '#FF9500',
  ]);
  const [bgcUrl, setBgcUrl] = useState({});
  const [recommendList, setRecommendList] = useState([]);
  const [allList, setAllList] = useState([]);

  // 获取压缩图片地址
  const getRecommendList = (list) => {
    let recommendList = list.map((i) => {
      let ysimg;
      if (i.img) {
        ysimg = i.img.split('.');
        ysimg[ysimg.length - 2] = ysimg[ysimg.length - 2] + 'ys';
        ysimg = ysimg.join('.');
      } else {
        ysimg = null;
      }
      return {
        ...i,
        ysimg,
      };
    });
    return recommendList
  };

  //   查看详情
  const lookDetail = (id) => {
    console.log('查看详情', id);
    Router.push('/detail?id=' + id);
  };
  // 直接显示顶部
  const showTop = () => {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  };

  // 滚动到文章位置
  const scrollTo = (id) => {
    let domY =
      document.getElementById(id).getBoundingClientRect().top -
      55 +
      window.pageYOffset;

    // if (id=='推荐文章') {
    //   domY = document.getElementById('recommend').getBoundingClientRect().top - 55 + window.pageYOffset;
    // } else {
    //   domY = document.getElementById('allArticle').getBoundingClientRect().top - 55 + window.pageYOffset;
    // }

    window.scrollTo({
      top: domY,
      behavior: 'smooth', //  smooth(平滑滚动),instant(瞬间滚动),默认auto
    });
  };

  // item动画
  const scrollListener = () => {
    let winHeight = window.innerHeight;
    let doms = document.querySelectorAll('.articleItem');
    doms.forEach((i, idx) => {
      if (i.getBoundingClientRect().top - i.offsetHeight / 3 < winHeight) {
        i.style.transform = 'scale(1)';
      } else {
        i.style.transform = 'scale(0)';
      }
    });
  };
  return (
    <div>
      <Head>
        <title>yzyの博客-首页</title>
        <link
          rel="shortcut icon"
          href="../static/img/bitbug_favicon.ico"
          type="image/x-icon"
        />
      </Head>
      {/* <Ribbon /> */}

      <Header
        getBgcUrl={(data) => {
          console.log('bgcUrl', data);
          setBgcUrl(data);
        }}
      />
      <Bgc
        bgcUrl={bgcUrl}
        scrollTo={(id) => {
          scrollTo(id);
        }}
        btns={[
          {
            name: '推荐文章',
            id: 'recommend',
            icon: 'icon-good',
            fosi: 16,
          },
          {
            name: '所有文章',
            id: 'allArticle',
            icon: 'icon-image-text',
          },
        ]}
      />

      {/* <div className={cssIndex.btn}>
            <Button icon={<ArrowDownOutlined />} ghost size={'large'} shape="round" style={{marginRight:'70px'}}>阅读正文</Button>
            <Button ghost size={'large'} shape="round">阅读正文</Button>
          </div>
          <div className={cssIndex.myContact}>
            <QqOutlined />
            <QqOutlined />
            <QqOutlined />
            <QqOutlined />
          </div> */}

      <div className={cssIndex.common}>
        {/* {isDetails ? (
          <Row className={cssIndex.comm_main} justify="center">
            {' '}
            <Col
              className={cssIndex.comm_left}
              xs={24}
              sm={24}
              md={13}
              lg={13}
              xl={13}
            >
              详情页的左
            </Col>
            <Col
              className={cssIndex.comm_right}
              xs={0}
              sm={0}
              md={11}
              lg={11}
              xl={11}
            >
              详情页的右
            </Col>
          </Row>
        ) : ( */}
        <Row className={cssIndex.comm_main} justify="center">
          <Col className={cssIndex.comm_home} span={24}>
            <div className={cssIndex.content}>
              <div className={cssIndex.recommend}>
                <div className={cssIndex.title} id="recommend">
                  <LikeOutlined />
                  &nbsp;
                  <span>推荐文章</span>
                </div>
                <Row className={cssIndex.list} justify="space-around">
                  {recommendList.map((i, idx) => (
                    <Col
                      className={cssIndex.articleItem + ' articleItem'}
                      xs={20}
                      sm={10}
                      key={i.id}
                      style={{
                        backgroundImage: `url('${
                          i.ysimg ||
                          '/static/img/articleBgc/trianglify-lowres' +
                            (idx % 5) +
                            '.png'
                        }')`,
                      }}
                    >
                      <div className={cssIndex.articleTitle}>{i.title}</div>
                      <div className={cssIndex.articleType}>
                        {i.skillType || '未知'}
                      </div>
                      <div className={cssIndex.articleSynopsis}>
                        {i.synopsis}
                      </div>
                      <Button
                        className={cssIndex.btn}
                        onClick={() => {
                          lookDetail(i.id);
                        }}
                        size={'large'}
                        shape="round"
                        style={{
                          background: `linear-gradient(to right, ${
                            colorList[(idx % 4) * 2]
                          } 0%, ${colorList[(idx % 4) * 2 + 1]} 100%)`,
                        }}
                      >
                        阅读文章
                      </Button>
                    </Col>
                  ))}
                </Row>
              </div>

              <div className={cssIndex.allArticle} id="articleList">
                <div className={cssIndex.title} id="allArticle">
                  <FileTextOutlined />
                  &nbsp;
                  <span>所有文章</span>
                </div>
                <Row className={cssIndex.list} justify="space-around">
                  {allList.map((i, idx) => (
                    <Col
                      className={cssIndex.articleItem + ' articleItem'}
                      xs={20}
                      sm={7}
                      key={i.id}
                      style={{
                        backgroundImage: `url('${
                          i.ysimg ||
                          '/static/img/articleBgc/trianglify-lowres' +
                            (idx % 5) +
                            '.png'
                        }')`,
                      }}
                    >
                      <div className={cssIndex.articleTitle}>{i.title}</div>
                      <div className={cssIndex.articleType}>
                        {i.skillType || '未知'}
                      </div>
                      <div className={cssIndex.articleSynopsis}>
                        {i.synopsis}
                      </div>
                      <Button
                        onClick={() => {
                          lookDetail(i.id);
                        }}
                        size={'large'}
                        shape="round"
                        style={{
                          background: `linear-gradient(to right, ${
                            colorList[(idx % 4) * 2]
                          } 0%, ${colorList[(idx % 4) * 2 + 1]} 100%)`,
                        }}
                      >
                        阅读文章
                      </Button>
                    </Col>
                  ))}
                </Row>
              </div>
            </div>
          </Col>
        </Row>
        {/* )} */}
      </div>
      <Footer />
      {/* <script
        async
        src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"
      ></script>
      <span id="busuanzi_container_site_uv">
        本站访客数<span id="busuanzi_value_site_uv"></span>人次
      </span> */}
    </div>
  );
};

Index.getInitialProps = async () => {
  let res = await API.getHomeArticle();
  console.log('res000', res);
  return { list: res.data };
};

export default Index;
